<template>
  <div>
    <!--使用ref将 v-form关联给了MyBrandForm.Vue,所以可以通过this.$ref.获取-->
    <v-form v-model="valid" ref="MyBrandForm">
      <v-text-field label="品牌名称" v-model="brand.name"></v-text-field>
      <v-text-field label="品牌首字母" v-model="brand.letter"></v-text-field>
      <v-cascader url="/item/category/list" multiple required v-model="brand.categories" label="请选择商品分类"/>
      <v-layout row>
        <v-flex xs3>
          <span style="font-size: 16px; color: #444">品牌LOGO：</span>
        </v-flex>
        <v-flex>
          <v-upload
            v-model="brand.image"
            url="/upload/image"
            :multiple="false"
            :pic-width="250"
            :pic-height="90"
          />
        </v-flex>
      </v-layout>
      <v-layout class="my-4" row>
        <v-spacer/>
        <v-btn @click="submit" color="primary">提交</v-btn>
        <v-btn @click="clear">重置</v-btn>
      </v-layout>
    </v-form>
  </div>

</template>

<script>
  export default {
    name: "MyBrandForm",
    data() {
      return {
        valid: false, // 表单校验结果标记
        brand: {
          name: '', // 品牌名称
          letter: '', // 品牌首字母
          image: '',// 品牌logo
          categories: [], // 品牌所属的商品分类数组
        }
      }
    },
    //按钮的两个方法
    methods: {
      //提交
      submit() {
        //表单的校验
        if (this.$refs.MyBrandForm.validate()) {
          //解构将categories对象数组取出,others中是除了categories外,brand的其他属性.
          let {categories, ...others} = this.brand;

          //为什么下面的写法错误了????

          //继续将categories对象数组变成id数组
          let list = categories.map(ct => ct.id);
          // others.cids会使得原来的others多出一个cids的属性,cids就是代表着品牌分类的id,
          // 取出categories中的id赋值给cids,join方法的参数是分隔符,不写默认是逗号;
          others.cids = list.join(",");
          //进来以后表示,验证成功发起post请求(restful中新增数据是,发起post请求)

          // others.cids = categories.map(ct => ct.id).join(",");
          // this.$http.post("/item/brand", this.$qs.stringify(others))

          //修改与新增需要动态判断
          this.$http({
            method: this.edit ? "put" : "post",
            url: "/item/brand",
            data: this.$qs.stringify(others)
          }).then(resp => {
                //弹出保存成功的窗口
                this.$message.success("品牌保存成功")
                //成功关闭窗口
                this.$emit("close");
              }
            ).catch(resp => {
            this.$message.error("品牌保存失败,请重试")
          })
        } else {
          this.$message.error("数据有误,请更正")
        }

      },
      //重置
      clear() {
        //这里的reset方法只能处理form表单的相关属性,,cascader属于自定义的属性,需要手动的将其清空
        this.$refs.MyBrandForm.reset();
        this.brand.categories = []
      }
    },
    //父向子通讯
    props: {
      //这里得到的值是父向子传递的,展示到前端不是这个oldBrand而是子自己的属性brand,所以需要下面的watch继续赋值
      oldBrand: {
        type: Object,
        default: {}
      },
      edit: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      oldBrand: {
        deep: true,
        handler(value) {
          if (value) {
            this.brand = Object.deepCopy(value)
          } else {
            this.brand = {
              name: '', // 品牌名称
              letter: '', // 品牌首字母
              image: '',// 品牌logo
              categories: [] // 品牌所属的商品分类数组
            }
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
